<template>
	<!-- 我的 -->
	<view>
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="status_title">
			<view class="status_right"></view>
			<view class="status_center">我的</view>
			<view class="status_right"></view>
		</view>
		<!-- 头部----头像、name、绑定手机号、余额、优惠、积分 -->
		<view class="top">
			<view class="top-top" @click="goMeInfo">
				<view class="top-top-img">
					<img src="https://cdn.uviewui.com/uview/swiper/swiper3.png" alt="" />
				</view>
				<view class="top-top-name">
					liying
				</view>
				<view class="top-top-shouji">
					<u-icon name="phone" color="#fff"></u-icon>暂未绑定
				</view>
				<view class="top-top-right">
					<u-icon name="arrow-right" color="#fff" size="10"></u-icon>
				</view>
			</view>
			<view class="top-xia">
				<!-- 余额 -->
				<view class="ont top-div">
					<span>0.00</span>元
					<p>我的余额</p>
				</view>
				<!-- 优惠 -->
				<view class="tow top-div">
					<span>0.00</span>元
					<p>我的余额</p>
				</view>
				<!-- 积分 -->
				<view class="three top-div">
					<span>0.00</span>元
					<p>我的余额</p>
				</view>
			</view>
		</view>
		<!-- 我的订单、积分商城、起点外卖会员卡··· -->
		<view class="list-data">
			<view class="list-data-div">
				<view class="list-data-img">
					<img src="http://chenghaohaocheng.oss-cn-beijing.aliyuncs.com/icon/%E8%AE%A2%E5%8D%95.png?Expires=1716479126&OSSAccessKeyId=TMP.3KhPQFJHqk8hcRpg5zHFBifSRzx4VubNwfGwNckXF1FyYNjy8WQumGw3Nm54boJuo7DGh4U63Xg6UGPjWvMGPM8oUHPSzb&Signature=JQjR9F9sijdN4rfku%2BOIFgfZk1A%3D" alt="" />
				</view>
				<view class="list-data-text">
					我的订单 <span><u-icon name="arrow-right" size="13" color="#d6d6d6"></u-icon></span>
				</view>
			</view>
			<view class="list-data-div">
				<view class="list-data-img">
					<img src="http://chenghaohaocheng.oss-cn-beijing.aliyuncs.com/icon/%E9%92%B1%E9%92%B1%E9%92%B1.png?Expires=1716481845&OSSAccessKeyId=TMP.3KhPQFJHqk8hcRpg5zHFBifSRzx4VubNwfGwNckXF1FyYNjy8WQumGw3Nm54boJuo7DGh4U63Xg6UGPjWvMGPM8oUHPSzb&Signature=2lRGLdnT5O2xwQzVOcQZpcjq418%3D" alt="" />
				</view>
				<view class="list-data-text">
					积分商城 <span><u-icon name="arrow-right" size="13" color="#d6d6d6"></u-icon></span>
				</view>
			</view>
			<view class="list-data-div">
				<view class="list-data-img">
					<img src="http://chenghaohaocheng.oss-cn-beijing.aliyuncs.com/icon/hyjg.png?Expires=1716481927&OSSAccessKeyId=TMP.3KhPQFJHqk8hcRpg5zHFBifSRzx4VubNwfGwNckXF1FyYNjy8WQumGw3Nm54boJuo7DGh4U63Xg6UGPjWvMGPM8oUHPSzb&Signature=WTIuV6OIwqLQeXJGkgEVMbnVrWA%3D" alt="" />
				</view>
				<view class="list-data-text">
					起点外卖会员卡 <span><u-icon name="arrow-right" size="13" color="#d6d6d6"></u-icon></span>
				</view>
			</view>
		</view>
		<view class="lou">
			<view class="list-data-div">
				<view class="list-data-img">
					<img src="http://chenghaohaocheng.oss-cn-beijing.aliyuncs.com/icon/%E5%A4%A7%E6%A5%BC%2C%E5%BB%BA%E7%AD%91.png?Expires=1716482188&OSSAccessKeyId=TMP.3KhPQFJHqk8hcRpg5zHFBifSRzx4VubNwfGwNckXF1FyYNjy8WQumGw3Nm54boJuo7DGh4U63Xg6UGPjWvMGPM8oUHPSzb&Signature=XncRhhits0KUvhHOweXyPuYxJA4%3D" alt="" />
				</view>
				<view class="list-data-text">
					服务中心 <span><u-icon name="arrow-right" size="13" color="#d6d6d6"></u-icon></span>
				</view>
			</view>
		</view>
		<view style="padding: 20px;">
			<u-button type="primary" text="退出" color="#ff0000" hairline="false"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
	      data() {
	        return {
	          
	        }
	      },
	      methods: {
	        goMeInfo(){
				uni.navigateTo({
					url:'/pages/myDetails/myDetails'
				});
			}
	      }
		}
</script>

<style scoped lang="scss">
	.status_bar {
	  height: var(--status-bar-height);
	  width: 100%;
	  background: #02a774;
	}
	.status_title {
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 35px;
		padding: 0 16px;
		background-color: #02a774;
		.status_center {
			font-size: 17px;
			font-weight: 700;
			color: #fff;
		}
	}
	.top{
		margin-bottom: 20rpx;
		.top-top{
			height: 150rpx;
			padding: 50rpx 0;
			background-color: #02a774;
			color: #fff;
			position: relative;
			.top-top-img{
				border-radius: 100px;
				overflow: hidden;
				width: 100rpx;
				height: 100rpx;
				float: left;
				margin: 0 40rpx;
				img{
					width: 100%;
					height: 100%;
				}
			}
			.top-top-name{
				font-weight: 900;
				margin-bottom: 30rpx;
			}
			.top-top-shouji{
				font-size: 25rpx;
				.u-icon{
					float: left;
					padding: 5rpx 10rpx 0 0;
				}
			}
			.top-top-right{
				position: absolute;
				right: 60rpx;
				top: 90rpx;
			}
		}
		.top-xia{
			height: 210rpx;
			border-bottom: 1px solid #e1e1e1;
			text-align: center;
			.top-div{
				width: 33.1%;
				height: 150rpx;
				padding-top: 30rpx;
				float: left;
				line-height: 65rpx;
				font-size: 30rpx;
				color: #a1a1a1;
				span{
					font-weight: 900;
					font-size: 55rpx;
				}
			}
			.ont{
				border-right: 1px solid #e1e1e1;
				span{
					color: #ff9900;
				}
			}
			.tow{
				border-right: 1px solid #e1e1e1;
				span{
					color: #ff5f3e;
				}
			}
			.three{
				span{
					color: #6ac20b;
				}
			}
		}
	}
	.list-data{
		height: 355rpx;
		// background: pink;
		border-top: 1px solid #d6d6d6;
		border-bottom: 1px solid #d6d6d6;
		.list-data-div{
			background: red;
			.list-data-img{
				padding: 40rpx 20rpx 20rpx 20rpx;
				width: 40rpx;
				height: 40rpx;
				float: left;
				img{
					width: 100%;
					height: 100%;
				}
			}
			.list-data-text{
				width: 675rpx;
				padding: 40rpx 0;
				float: left;
				border-bottom: 1px solid #d6d6d6;
				font-size: 25rpx;
				span{
					float: right;
				}
			}
		}
	}
	.lou{
		.list-data-div{
			background: red;
			.list-data-img{
				padding: 30rpx 20rpx 20rpx 20rpx;
				width: 40rpx;
				height: 40rpx;
				float: left;
				img{
					width: 100%;
					height: 100%;
				}
			}
			.list-data-text{
				width: 675rpx;
				padding: 30rpx 0;
				float: left;
				font-size: 25rpx;
				span{
					float: right;
				}
			}
		}
	}
</style>
